<template>
	<view class="homeList">
		<scroll-view scroll-y class="list">
			<view class="list-item" v-for="(item,index) in homeList" :key="index" @click="toHome(item.id)">
				<view class="left">
					<view class="info">
						<text class="name">{{item.homeName}}</text>
						<!-- <text class="tip">
							{{item.roomNum}}个房间/{{item.deviceNum || 0}}个设备
						</text> -->
						<!-- <text class="tip">
							{{item.deviceNum || 0}}个设备
						</text> -->
					</view>
					<text class="share" v-if="item.homeType == 'share'">共享家庭</text>
				</view>
				<u-icon class="icon" name="arrow-right" color="#111111" size="40"></u-icon>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as LoginApi from '@/api/login/index.js';
	
	export default {
		data() {
			return {
				homeList: []
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				LoginApi.homeList().then(res => {
					console.log("homeList success", res);
					let homeList = [];
					if(!!res && !!res.obj) {
						homeList = res.obj;
					}
					this.homeList = homeList;
				})
			},
			toHome(id) {
				uni.navigateTo({
					url:`/pages/mine/home?homeId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homeList {
		height: 100vh;
		background-color: #f5f5f7;
		
		.list {
			height: 100%;
			
			.list-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				height: 170rpx;
				border-bottom: 1rpx solid #DCDCDC;
				background-color: #FFFFFF;
				
				.left {
					display: flex;
					flex-direction: row;
				
					.info {
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
				
						.name {
							font-size: 36rpx;
							color: #010101;
							font-weight: bold;
						}
				
						.tip {
							font-size: 25rpx;
							color: #737171;
							margin-top: 5rpx;
						}
					}
				
					.share {
						font-size: 25rpx;
						color: #0dd30c;
						margin-top: 15rpx;
						margin-left: 20rpx;
					}
				}
				
				.icon {
					margin-right: 30rpx;
				}
			}
		}
	}
</style>